<!--
 * @Description: 订单详情页
 * @Author: money
 * @Date: 2021-06-24 17:03:34
 * @LastEditors: Zlou
 * @LastEditTime: 2021-07-02 15:59:02
-->
<template>
  <div>
    <!-- {{ mainData }} -->
    <!-- <div>
      订单详情页
      <br />
      订单id：{{ $route.query.index }}
      <br />
      注意接收路由携带的参数this.$route.query.index
    </div> -->
    <!-- 返回 -->
    <div class="back">
      <el-button @click="goBack" icon="el-icon-arrow-left" type="text"
        >返回</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        size="mini"
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" align="center" label="订单项编号">
        </el-table-column>
        <el-table-column prop="productId" align="center" label="产品编号">
        </el-table-column>
        <el-table-column prop="product.name" align="center" label="产品">
        </el-table-column>
        <el-table-column align="center" label="产品图片">
          <template slot-scope="scope">
            <el-image
              style="height: 30px"
              :src="scope.row.product.photo"
              :preview-src-list="[scope.row.product.photo]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="单价">
        </el-table-column>
        <el-table-column prop="number" align="center" label="数量">
        </el-table-column>
      </el-table>
    </div>
    <!-- 卡片 -->
    <div class="el-row">
      <!-- 订单基本信息 -->
      <div
        class="card"
        style="padding-leemployeedataft: 10px; padding-right: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单基本信息</span>
          </div>
          <div class="card_body">
            <div class="item">
              {{ "订单编号：" + mainData.id }}
            </div>
            <div class="item">
              订单金额：￥
              <span class="red_info_money"> {{ mainData.total }}</span>
              元
            </div>
            <div class="item" v-if="mainData.serviceTime">
              {{
                "下单时间：" +
                moment(mainData.serviceTime).format("YYYY-MM-DD HH:mm:ss")
              }}
            </div>
            <div class="item">
              {{ "订单状态：" + mainData.status }}
            </div>
          </div>
        </el-card>
      </div>
      <!-- 接单者信息 -->
      <div
        class="card"
        style="padding-leemployeedataft: 10px; padding-right: 10px"
        v-if="employeeData"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>接单者信息</span>
          </div>
          <div class="card_body">
            <div class="item">
              {{ "接单者：" + employeeData.username }}
            </div>
            <div class="item">
              {{ "接单者手机号：" + employeeData.telephone }}
            </div>
          </div>
        </el-card>
      </div>
      <!-- 下单者信息 -->
      <div
        v-if="customerData"
        class="card"
        style="padding-leemployeedataft: 10px; padding-right: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>下单者信息</span>
          </div>
          <div class="card_body">
            <div class="item">
              {{ "下单者：" + customerData.username }}
            </div>
            <div class="item">
              {{ "下单者手机号：" + customerData.telephone }}
            </div>
          </div>
        </el-card>
      </div>
      <!-- 雇主信息 -->
      <div
        class="card"
        style="padding-leemployeedataft: 10px; padding-right: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>雇主信息</span>
          </div>
          <div class="card_body">
            <div class="item">
              {{ "雇主：" + addressData.username }}
            </div>
            <div class="item">
              {{ "雇主手机号：" + addressData.telephone }}
            </div>
            <div class="item">
              {{
                "服务地址：" +
                addressData.city +
                addressData.area +
                addressData.address
              }}
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { findById } from "@/api/order";
import moment from "moment";
export default {
  data() {
    return {
      mainData: [],
      // 表格数据
      tableData: [],
      // 接单者数据
      employeeData: [],
      // 下单者数据
      customerData: [],
      // 雇主数据
      addressData: [],
    };
  },
  computed: {},
  methods: {
    // 返回
    goBack() {
      history.back();
    },
    // 获取产品数据
    async queryData() {
      let temp = {};
      temp.id = this.$route.query.index;
      let res = await findById(temp);
      console.log(res, "----");
      this.mainData = res.data;
      this.tableData = res.data.orderLines;
      this.employeeData = res.data.employee;
      this.customerData = res.data.customer;
      this.addressData = res.data.address;
    },
    // 时间格式化
    moment,
  },
  created() {
    this.queryData();
    /* this.$route.query.index是订单页传递的id值，需要发送请求，获取订单的详情数据，设置到数据模型中，然后vue视图中使用这些数据。 */
    // alert(this.$route.query.index);
  },
  mounted() {},
};
</script>
<style scoped>
.back {
  margin-bottom: 10px;
  margin-left: 10px;
}

.table {
  margin-bottom: 25px;
}

.item {
  margin-bottom: 18px;
}

.el-row {
  display: flex;
  width: 100%;
  margin-left: 5px;
  margin-right: 5px;
}

.card {
  width: 25%;
}

.card_body {
  padding: 20px;
}
</style>